<template>
	<view>
		<view class="feed-back-box">
			<picker mode="selector" :range="typeList" range-key="label" :value="typeIndex" @change="changeType">
				<view class="fx-center-between type-box">
					<view class="">{{typeText ? typeText : '点击选择反馈问题的类型'}}</view>
					<van-icon name="arrow" color="#9F9D9D" />
				</view>
			</picker>

			<view class="main-basic-name" style="margin-top: 34rpx;">
				反馈描述<text class="tip-color">*</text>
			</view>
			<view class="textarea-box main-basic-textarea">
				<textarea v-model="content" placeholder="输入详细的意见或建议" maxlength="200"></textarea>
				<view class="num-tip">{{content.length}}/200</view>
			</view>
			<view class="main-basic-name">
				上传图片
			</view>
			<c-upload :imgs="imgList" :maxNum="9" @delImg="delImg" @addSuccess="addImg"></c-upload>
		</view>

		<view class="main-basic-btn">
			<van-button block color="#4078E5" @click="submit">提交</van-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeList: [],
				typeIndex: 0,
				typeText: '',
				content: '',
				imgList: []
			};
		},
		onLoad() {
			this.getTypeList()
		},
		methods: {
			getTypeList() {
				this.$api.requst(`/gwc/form/feedback_types`, {}).then((res) => {
					this.typeList = res.data
				})
			},
			changeType(e) {
				this.typeIndex = Number(e.detail.value)
				this.typeText = this.typeList[this.typeIndex].label
			},
			delImg(index) {
				this.imgList.splice(index, 1)
			},
			addImg(url) {
				this.imgList.push(url)
			},
			async submit() {
				if (this.content.trim() === '') {
					this.$api.showError('反馈描述不能为空！')
					return
				}
				uni.showLoading({
					title: '数据提交中...'
				})
				let ids = []
				// 评价文件
				for (let i = 0; i < this.imgList.length; i++) {
					let fid = await this.$api.requestUploadQNY(this.imgList[i])
					ids.push(fid.asset_id)
				}
				let list = {
					title: this.typeText,
					body: this.content,
					file: ids.join(','),
				}
				this.$api
					.requst('/gwc/form/feedbacks', list, 'POST')
					.then((res) => {
						this.$api.showError('提交成功！')
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)

					})

			}
		}
	}
</script>

<style scoped lang="scss">
	.feed-back-box {
		background: #FFFFFF;
		border-radius: 4rpx;
		padding: 0 24rpx 28rpx;
		margin: 28rpx 32rpx 50rpx;

		.type-box {
			padding: 40rpx 0;
			font-size: 30rpx;
			color: #5C5F66;
			border-bottom: 2rpx solid #E2E2E2;
		}

		.tip-color {
			font-size: 26rpx;
			color: #FF3B51;
			font-weight: normal;
		}

		.textarea-box {
			padding: 32rpx;
			margin-top: 24rpx;
			margin-bottom: 40rpx;
		}
	}
</style>